<template>
    <div style="width: 100%;height: 100%;padding: 1px;display: flex;flex-direction: row;position:relative;">
        <div style="flex: 0 1 50%;background-color: skyblue;" ref="topo001"></div>
        <div style="
                flex: 1;
                background-color: black;
                color:white;
                display: flex;
                justify-content: center;
                align-items: center;">
            <div><p v-for="item in logList">{{item}}</p></div>
        </div>
        <div style="position: absolute;left: 1px;top: 1px;z-index: 999;display: flex;flex-direction: column;padding: 2px;gap: 5px;">
            <el-button size="mini" round @click="addNode" style="width: 100px;margin-left: 0 !important;">
                添加3\4节点
            </el-button>
            <el-button size="mini" round @click="deleteNode" style="width: 100px;margin-left: 0 !important;">
                删除3\4节点
            </el-button>
            <el-button size="mini" round @click="deleteNode2" style="width: 100px;margin-left: 0 !important;">
                删除3\4节点2
            </el-button>
        </div>
        <div style="position: absolute;left: 1px;bottom: 1px;z-index: 999;display: flex;flex-direction: column;padding: 2px;gap: 5px;">
            <el-button size="mini" round @click="changeTheme" style="width: 100px;margin-left: 0 !important;">
                切换主题（不好使）
            </el-button>
            <el-button size="mini" round @click="setStyle" style="width: 100px;margin-left: 0 !important;">
                添加3样式
            </el-button>
            <el-button size="mini" round @click="deleteStyle" style="width: 100px;margin-left: 0 !important;">
                删除3样式
            </el-button>
            <el-button size="mini" round @click="setStyle2" style="width: 100px;margin-left: 0 !important;">
                添加4样式
            </el-button>
            <el-button size="mini" round @click="setStyle3" style="width: 100px;margin-left: 0 !important;">
                添加3-4样式
            </el-button>
        </div>
    </div>
</template>
<script>
    import {Stage, Layer, Node, Link} from '@jtopo/core';
    import {Toolbar} from '@jtopo/extensions';
    import {Editor} from '@jtopo/editor';

    export default {
        data() {
            return {
                logList: [],
                stage: null,
                flagTheme: false,
                layer: null,
            }
        },
        mounted() {
            this.learn001();
        },
        methods: {
            setStyle3() {
                let link3_4 = this.layer.querySelector('Link[text="test3-4"]');
                if (link3_4) {
                    // 线条颜色和宽度
                    link3_4.setStyles({
                        strokeStyle: 'red',
                        lineWidth: 3,
                        lineDash: [5, 2]
                    });
                }
            },
            setStyle2() {
                let node = this.layer.querySelector('Node[text="test444"]');
                if (node) {
                    node.setStyles({
                        // 边框、背景和字体颜色的设置遵循Html5-CSS
                        border: '1px solid gray',
                        backgroundColor: 'green',
                        color: 'white',
                        //内部图形的线条和填充等属性遵循Canvas绘图定义
                        strokeStyle: 'red',
                        fillStyle: 'orange',
                        globalAlpha: 0.5,
                        lineWidth: 3
                    });
                }
            },
            deleteStyle() {
                let node3 = this.layer.querySelector('Node[text="test333"]');
                if (node3) {
                    node3.removeClass('.glass');
                }
            },
            setStyle() {
                // 使用样式系统
                let styleSystem = this.stage.styleSystem;
                // 定义一个类似'玻璃'的样式
                styleSystem.defClass('.glass', {
                    // 边框
                    borderColor: '#F0F0F0',
                    borderRadius: 5,
                    borderWidth: 1,
                    // 边框与里面图形的内间距
                    padding: 3,
                    // 背景颜色
                    backgroundColor: 'rgba(255,128,128,0.6)',
                    // 图形绘制参数
                    lineWidth: 1,
                    strokeStyle: 'blue',
                    // 字体大小
                    fontSize: '14px',
                });
                let node3 = this.layer.querySelector('Node[text="test333"]');
                if (node3) {
                    // 使用上面定义好的样式
                    node3.addClass('.glass');
                }
            },
            deleteNode2() {
                let arr = this.layer.querySelectorAll(obj => {
                    return obj._text.indexOf("test") != -1;
                });
                arr.forEach(item => {
                    this.layer.removeChild(item);
                })
            },
            deleteNode() {
                let node3 = this.layer.querySelector('Node[text="test333"]');
                if (node3) {
                    this.layer.removeChild(node3)
                }
                let node4 = this.layer.querySelector('Node[text=="test444"]');
                if (node4) {
                    this.layer.removeChild(node4);
                }
                let link = this.layer.querySelector('Link[text=="test3-4"]');
                if (link) {
                    this.layer.removeChild(link);
                }
            },
            addNode() {
                let node = this.layer.querySelector('Node[text="test333"]');
                if (node) {
                    //如果已经添加了，就不再添加了
                    return;
                }
                const fromNode = new Node('test333', -100, -100, 40, 40);
                const toNode = new Node('test444', 200, -100, 40, 40);
                const link = new Link('test3-4', fromNode, toNode);
                this.layer.addChild(link);
                this.layer.addChild(fromNode);
                this.layer.addChild(toNode);
            },
            //切换主题测试（并没有啥卵用）
            changeTheme() {
                console.log("changeTheme");
                // 使用样式系统
                let styleSystem = this.stage.styleSystem;
                if (!this.flagTheme) {
                    // 切换到'暗色'主题
                    styleSystem.setTheme('DefaultDark');
                    this.$refs.topo001.style.backgroundColor = "black";
                } else {
                    // 切换到'明亮'主题（默认生效的主题）
                    styleSystem.setTheme('DefaultLight');
                    this.$refs.topo001.style.backgroundColor = "skyblue";
                }
                this.flagTheme = !this.flagTheme;
            },
            //初始化+事件学习
            learn001() {
                this.stage = new Stage(this.$refs.topo001);
                this.layer = new Layer(this.stage);
                const fromNode = new Node('From', 0, 0, 40, 40);
                const toNode = new Node('To', 300, 200, 40, 40);
                // 设置节点填充颜色
                fromNode.setStyles({
                    fillStyle: 'orange'
                });
                toNode.setStyles({
                    fillStyle: 'blue'
                });
                const link = new Link('Link', fromNode, toNode);
                this.layer.addChild(link);
                this.layer.addChild(fromNode);
                this.layer.addChild(toNode);
                // this.stage.show();

                // 全局性事件监听处理
                this.stage.inputSystem.addEventListener('click', () => {
                    let target = this.stage.inputSystem.target;
                    if (target == null) {
                        this.consoleLog('全局监听：没有点中任何对象');
                        return;
                    }
                    this.consoleLog('全局监听：点中了一个对象:' + target.x + "/" + target.y);
                });


                // 鼠标或指针进入 （鼠标进入node中触发一次）
                fromNode.addEventListener('pointerenter', () => {
                    this.consoleLog('进入节点事件触发');
                    fromNode.text = 'pointerenter';
                });
                // 鼠标或指针离开
                fromNode.addEventListener('pointerout', () => {
                    this.consoleLog('离开节点事件触发');
                    fromNode.text = 'pointerout';
                });
                // 单击
                fromNode.addEventListener('click', () => {
                    this.consoleLog('节点单击：click');
                    fromNode.text = 'click';
                });
                // 双击
                fromNode.addEventListener('dblclick', () => {
                    this.consoleLog('节点双击：dblclick（双击一定会触发一次单击事件）');
                    fromNode.text = 'dblclick';
                });


                // 鼠标或指针移动 (鼠标在node中移动会不断触发)
                toNode.addEventListener('pointermove', () => {
                    this.consoleLog('在节点内移动事件触发');
                    toNode.text = 'pointermove';
                });
                // 按下
                toNode.addEventListener('pointerdown', () => {
                    this.consoleLog('节点内 鼠标按下事件触发');
                    toNode.text = 'pointerdown';
                });
                // 松开
                toNode.addEventListener('pointerup', () => {
                    this.consoleLog('节点内 鼠标抬起事件触发');
                    toNode.text = 'pointerup';
                });
            },
            consoleLog(content) {
                if (this.logList.length > 10) {
                    this.logList.shift();
                }
                this.logList.push(this.formatCurrentTime() + " >> " + content);
            },
            formatCurrentTime() {
                const now = new Date();
                // 年：4位数
                const year = now.getFullYear();
                // 月：0-11 → 需+1，补零
                const month = String(now.getMonth() + 1).padStart(2, '0');
                // 日：补零
                const day = String(now.getDate()).padStart(2, '0');
                // 时：补零
                const hours = String(now.getHours()).padStart(2, '0');
                // 分：补零
                const minutes = String(now.getMinutes()).padStart(2, '0');
                // 秒：补零
                const seconds = String(now.getSeconds()).padStart(2, '0');
                // 拼接为 yyyy-dd-mm HH:mm:ss 格式
                return `${year}-${day}-${month} ${hours}:${minutes}:${seconds}`;
            }
        },
    }
</script>